<template>
  <div class="container">
    <div class="leftSide">
      <el-card id="leftSide">
        <div v-for="(item,index) in leftItemList" :key="index"
        :class="{choosed: index === chooseIndex}" @click="itemClick(index, item.id)" class="leftItem">
        {{item.label}}
        </div>
      </el-card>
    </div>
    <el-card class="middleContent">
      <el-button type="primary" @click="createPdf">下载简历</el-button>
      <!--基本资料区域-->
      <div style="margin-top: 10px" id="basic">
        <div v-if="!isEditBasicInfo" @click="isEditBasicInfo=true" class="basicInfoBox">
          <img :src="basicInfoForm.avatarUrl" alt="" class="avatar">
          <div class="basicInfo">
            <h1>{{basicInfoForm.name ? basicInfoForm.name: '姓名未填写'}}</h1>
            <div class="infoBox">
              <span class="infoItem"><i class="iconfont icon-xingbie"></i>{{basicInfoForm.sex===1?'男':'女'}}</span>
              <span class="infoItem"><i class="iconfont icon-shengrix"></i>{{birthday+'岁'}}</span>
              <span class="infoItem"><i class="iconfont icon-dianhua"></i>{{basicInfoForm.phone}}</span>
              <span class="infoItem"><i class="iconfont icon-youjian"></i>{{basicInfoForm.email}}</span>
            </div>
          </div>
        </div>
        <div class="editBasicInfo" v-else>
          <div>
            <el-upload :on-success="fileSuccess" :headers="headerObj" :show-file-list="false" action="http://127.0.0.1:8000/upload/resumeAvatar">
              <div class="avatarErea">
                <img :src="basicInfoForm.avatarUrl+`?tempid=${Math.random()}`" :key="imgkey" class="avatar" alt="" />
                <div class="camera">
                  <i class="iconfont icon-xiangji"></i>
                </div>
              </div>
            </el-upload>
          </div>
          <el-form ref="form" label-width="80px" :rules="basicInfoRules" :model="basicInfoForm">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="basicInfoForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="basicInfoForm.sex" :label="1" border>男</el-radio>
              <el-radio v-model="basicInfoForm.sex" :label="2" border>女</el-radio>
            </el-form-item>
            <el-form-item label="生日" prop="date">
              <el-date-picker
                v-model="basicInfoForm.date"
                type="month"
                placeholder="选择月">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="当前身份" prop="status">
              <el-radio v-model="basicInfoForm.status" :label="1" border>学生</el-radio>
              <el-radio v-model="basicInfoForm.status" :label="2" border>非学生</el-radio>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
              <el-input placeholder="请输入手机号" v-model="basicInfoForm.phone" class="input-with-select">
                <el-select slot="prepend" placeholder="请选择">
                  <el-option label="中国+86" value="1"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input placeholder="请输入邮箱" v-model="basicInfoForm.email">
              </el-input>
            </el-form-item>
            <el-form-item class="buttonGroup">
              <el-button @click="basicInfoCancel">取消</el-button>
              <el-button type="primary" @click="submitBasicInfo">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--教育背景区域-->
      <div id="edu">
        <div class="cardHeader">
          <span class="title">教育背景</span>
          <span @click="addEduCard" class="add">+ 添加</span>
        </div>
        <div class="eduInfoBox" v-for="(item,index) in eduInfoList" :key="index">
          <div class="eduInfo" v-if="!item.isEdit" @click="eduInfoClick(item)">
            <div class="eduInfoHeader">
              <h4 class="college">{{item.college}}</h4>
              <span class="time">{{moment(item.dateArray[0]).format('YYYY.MM')}}~{{moment(item.dateArray[1]).format('YYYY.MM')}}</span>
            </div>
            <div class="eduInfoDetail">
              <span>{{item.discipline}}</span>
              <span>{{educationMap[item.education]}}</span>
              <span>{{rankMap[item.gradeRank]}}</span>
            </div>
          </div>
          <div class="editEduInfo" v-else>
            <el-form label-width="120px" :rules="eduInfoRules" :model="item">
              <el-form-item label="学历" prop="education">
                <el-select v-model="item.education" placeholder="请选择">
                  <el-option
                    v-for="item in educationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学校" prop="college">
                <el-input v-model="item.college"></el-input>
              </el-form-item>
              <el-form-item label="专业" prop="discipline">
                <el-input v-model="item.discipline"></el-input>
              </el-form-item>
              <el-form-item label="专业排名(选填)">
                <el-select v-model="item.gradeRank" placeholder="请选择">
                  <el-option
                    v-for="item in rankOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="collegeTime" label="在校时间">
                <el-date-picker
                  v-model="item.dateArray"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
            <el-form-item class="buttonGroup">
              <el-button @click="cancelEditEduInfo(item, index)">取消</el-button>
              <el-button type="primary" @click="submitEduInfo(item, index)">保存</el-button>
            </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!--校内经历-->
      <div id="school">
        <div class="cardHeader">
          <span class="title">校内经历</span>
          <span @click="addSchoolCard" class="add">+ 添加</span>
        </div>
        <div class="eduInfoBox" v-for="(item,index) in schoolInfoList" :key="index">
          <div class="eduInfo" v-if="!item.isEdit" @click="schoolInfoClick(item)">
            <div class="eduInfoHeader">
              <h4 class="college">{{item.organization}}</h4>
              <span class="time">{{moment(item.dateArray[0]).format('YYYY.MM')}}~{{moment(item.dateArray[1]).format('YYYY.MM')}}</span>
            </div>
            <div class="eduInfoDetail">
              <span>{{item.role}}</span>
            </div>
            <div class="practiceContent">
              {{item.content}}
            </div>
          </div>
          <div class="editEduInfo" v-else>
            <el-form label-width="120px" :model="item">
              <el-form-item label="组织" prop="organization">
                <el-input v-model="item.organization" placeholder="请输入项目名称"></el-input>
              </el-form-item>
              <el-form-item label="担任职务" prop="role">
                <el-input v-model="item.role"></el-input>
              </el-form-item>
              <el-form-item class="collegeTime" label="经历时间">
                <el-date-picker
                  v-model="item.dateArray"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="经历内容" class="collegeTime" prop="content">
                <el-input type="textarea" class="collegeTime" v-model="item.content" placeholder="请输入经历内容"></el-input>
              </el-form-item>
            <el-form-item class="buttonGroup">
              <el-button @click="cancelEditSchoolInfo(item, index)">取消</el-button>
              <el-button type="primary" @click="submitSchoolInfo(item, index)">保存</el-button>
            </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!--实习经历-->
      <div id="practice">
        <div class="cardHeader">
          <span class="title">实习经历</span>
          <span @click="addPracticeCard" class="add">+ 添加</span>
        </div>
        <div class="eduInfoBox" v-for="(item,index) in practiceInfoList" :key="index">
          <div class="eduInfo" v-if="!item.isEdit" @click="practiceInfoClick(item)">
            <div class="eduInfoHeader">
              <h4 class="college">{{item.company}}</h4>
              <span class="time">{{moment(item.dateArray[0]).format('YYYY.MM')}}~{{moment(item.dateArray[1]).format('YYYY.MM')}}</span>
            </div>
            <div class="eduInfoDetail">
              <span>{{item.department}}</span>
              <span>{{item.site}}</span>
            </div>
            <div class="practiceContent">
              {{item.content}}
            </div>
          </div>
          <div class="editEduInfo" v-else>
            <el-form label-width="120px" :rules="practiceInfoRules" :model="item">
              <el-form-item label="公司" prop="company">
                <el-input v-model="item.company"></el-input>
              </el-form-item>
              <el-form-item label="部门" prop="department">
                <el-input v-model="item.department"></el-input>
              </el-form-item>
              <el-form-item label="职位" prop="site">
                <el-input v-model="item.site"></el-input>
              </el-form-item>
              <el-form-item label="在职时间">
                <el-date-picker
                  v-model="item.dateArray"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="collegeTime" label="工作内容">
                <el-input v-model="item.content" type="textarea"></el-input>
              </el-form-item>
            <el-form-item class="buttonGroup">
              <el-button @click="cancelEditPracticeInfo(item, index)">取消</el-button>
              <el-button type="primary" @click="submitPracticeInfo(item, index)">保存</el-button>
            </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!--项目经历-->
      <div id="project">
        <div class="cardHeader">
          <span class="title">项目经历</span>
          <span @click="addProjectCard" class="add">+ 添加</span>
        </div>
        <div class="eduInfoBox" v-for="(item,index) in projectInfoList" :key="index">
          <div class="eduInfo" v-if="!item.isEdit" @click="projectInfoClick(item)">
            <div class="eduInfoHeader">
              <h4 class="college">{{item.project}}</h4>
              <span class="time">{{moment(item.dateArray[0]).format('YYYY.MM')}}~{{moment(item.dateArray[1]).format('YYYY.MM')}}</span>
            </div>
            <div class="eduInfoDetail">
              <span>{{item.role}}</span>
            </div>
            <div class="practiceContent">
              {{item.description}}
            </div>
          </div>
          <div class="editEduInfo" v-else>
            <el-form label-width="120px" :model="item">
              <el-form-item label="项目名称" prop="project">
                <el-input v-model="item.project" placeholder="请输入项目名称"></el-input>
              </el-form-item>
              <el-form-item label="项目角色" prop="role">
                <el-input v-model="item.role"></el-input>
              </el-form-item>
              <el-form-item class="collegeTime" label="项目时间">
                <el-date-picker
                  v-model="item.dateArray"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="项目描述" class="collegeTime" prop="description">
                <el-input type="textarea" class="collegeTime" v-model="item.description" placeholder="请输入项目描述"></el-input>
              </el-form-item>
            <el-form-item class="buttonGroup">
              <el-button @click="cancelEditProjectInfo(item, index)">取消</el-button>
              <el-button type="primary" @click="submitProjectInfo(item, index)">保存</el-button>
            </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!--获奖情况-->
      <div id="prize">
        <div class="cardHeader">
          <span class="title">获奖情况</span>
          <span @click="addPrizeCard" class="add">+ 添加</span>
        </div>
        <div class="eduInfoBox" v-for="(item,index) in prizeInfoList" :key="index">
          <div class="eduInfo" v-if="!item.isEdit" @click="prizeInfoClick(item)">
            <div class="eduInfoDetail contentDetail">
              <span class="prizeName">{{item.prize}}</span>
              <span>{{moment(item.getPrizeTime).format('YYYY.MM')}}</span>
            </div>
          </div>
          <div class="editEduInfo" v-else>
            <el-form label-width="120px" :model="item">
              <el-form-item label="所获奖项" prop="prize">
                <el-input v-model="item.prize"></el-input>
              </el-form-item>
              <el-form-item label="获奖时间" prop="getPrizeTime">
                <el-date-picker
                  v-model="item.getPrizeTime"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </el-form-item>
            <el-form-item class="buttonGroup">
              <el-button @click="cancelEditPrizeInfo(item, index)">取消</el-button>
              <el-button type="primary" @click="submitPrizeInfo(item, index)">保存</el-button>
            </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!--个人技能-->
      <div id="skill">
        <div class="cardHeader title">个人技能</div>
        <div v-if="!isEditSkill" class="basicInfoBox" @click="isEditSkill=true">
          <div class="basicInfo">
            <div class="passageContent">{{skillInfoForm.skill ? skillInfoForm.skill: '暂未填写个人技能'}}</div>
          </div>
        </div>
        <div class="editBasicInfo" v-else>
          <el-form label-width="80px" :model="skillInfoForm">
            <el-form-item label="个人技能" style="width: 100%">
              <el-input v-model="skillInfoForm.skill" type="textarea"></el-input>
            </el-form-item>
            <el-form-item class="buttonGroup">
              <el-button @click.stop="skillInfoCancel">取消</el-button>
              <el-button type="primary" @click="submitSkillInfo">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--自我评价-->
      <div id="selfEvaluate">
        <div class="cardHeader title">自我评价</div>
        <div v-if="!isEditSelfEvaluate" class="basicInfoBox" @click="isEditSelfEvaluate=true">
          <div class="basicInfo">
            <div class="passageContent">{{selfEvaluateInfoForm.selfEvaluate ? selfEvaluateInfoForm.selfEvaluate : '暂未填写自我评价'}}</div>
          </div>
        </div>
        <div class="editBasicInfo" v-else>
          <el-form label-width="80px" :model="selfEvaluateInfoForm">
            <el-form-item label="自我评价" style="width: 100%">
              <el-input v-model="selfEvaluateInfoForm.selfEvaluate" type="textarea"></el-input>
            </el-form-item>
            <el-form-item class="buttonGroup">
              <el-button @click.stop="selfEvaluateInfoCancel">取消</el-button>
              <el-button type="primary" @click="submitSelfEvaluateInfo">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="求职设置"
      :visible.sync="statusDialogVisible"
      width="30%">
      <span>完善求职期望，方便更好的了解您</span>
      <el-form label-width="80px" :model="statusForm" label-position="top">
        <el-form-item label="目前的求职状态">
          <el-select v-model="statusForm.currentStatus">
            <el-option
              v-for="item in currentStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="毕业年份">
          <el-date-picker
            v-model="statusForm.graduateYear"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="意向职位">
          <el-input v-model="statusForm.post"></el-input>
        </el-form-item>
        <el-form-item label="期望薪资（年）" style="width: 100%">
          <el-input v-model="statusForm.fromMoney"></el-input>
          <div>-</div>
          <el-input v-model="statusForm.toMoney"></el-input>
        </el-form-item>
        <el-form-item label="期望工作地点">
          <el-input v-model="statusForm.workPlace"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="statusDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="statusDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      educationMap: {
        1: '博士后',
        2: '博士',
        3: '硕士',
        4: '本科',
        5: '专科',
        6: '高中',
        7: '初中',
        8: '小学'
      },
      rankMap: {
        1: '前1%',
        2: '1%~5%',
        3: '5%~20%',
        4: '20%~50%',
        5: '50%~100%'
      },
      rankOptions: [
        {
          value: 1,
          label: '前1%'
        },
        {
          value: 2,
          label: '1%~5%'
        },
        {
          value: 3,
          label: '5%~20%'
        },
        {
          value: 4,
          label: '20%~50%'
        },
        {
          value: 5,
          label: '50%~100%'
        }
      ],
      educationOptions: [
        {
          value: 1,
          label: '博士后'
        },
        {
          value: 2,
          label: '博士'
        },
        {
          value: 3,
          label: '硕士'
        },
        {
          value: 4,
          label: '本科'
        },
        {
          value: 5,
          label: '专科'
        },
        {
          value: 6,
          label: '高中'
        },
        {
          value: 7,
          label: '初中'
        },
        {
          value: 8,
          label: '小学'
        }
      ],
      currentStatusOptions: [
        {
          value: 1,
          label: '在校，找工作'
        },
        {
          value: 2,
          label: '在校，不找工作'
        },
        {
          value: 3,
          label: '在校，看机会'
        },
        {
          value: 4,
          label: '在职，看机会'
        },
        {
          value: 5,
          label: '在职，找工作'
        },
        {
          value: 6,
          label: '在职，不找工作'
        }
      ],
      statusForm: {},
      statusDialogVisible: false,
      imgkey: false,
      headerObj: {
        authorization: 'Bearer ' + window.sessionStorage.getItem('token')
      },
      oldSelfEvaluateInfoForm: {},
      oldSkillInfoForm: {},
      oldSchoolInfoList: [],
      schoolInfoList: [],
      selfEvaluateInfoForm: {},
      isEditSelfEvaluate: false,
      skillInfoForm: {},
      isEditSkill: false,
      oldPrizeInfoList: [],
      prizeInfoList: [],
      oldProjectInfoList: [],
      projectInfoList: [],
      oldPracticeInfoList: [],
      practiceInfoList: [],
      eduInfoRules: {
        education: [
          { required: true, message: '请输入学历', trigger: 'blur' }
        ],
        college: [
          { required: true, message: '请输入学校', trigger: 'blur' }
        ],
        discipline: [
          { required: true, message: '请输入专业', trigger: 'blur' }
        ]
      },
      eduInfoForm: {},
      eduInfoList: [],
      basicInfoForm: {
      },
      oldBasicInfo: {},
      practiceInfoRules: {
        company: [
          { required: true, message: '请输入公司', trigger: 'blur' }
        ],
        site: [
          { required: true, message: '请输入职务', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入部门', trigger: 'blur' }
        ]
      },
      basicInfoRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请输入性别', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请输入日期', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入当前身份', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ]
      },
      isEditBasicInfo: false,
      chooseIndex: 0,
      leftItemList: [
        {
          label: '基本资料',
          id: 'basic'
        },
        {
          label: '教育经历',
          id: 'edu'
        },
        {
          label: '校内经历',
          id: 'school'
        },
        {
          label: '实习经历',
          id: 'practice'
        },
        {
          label: '项目经历',
          id: 'project'
        },
        {
          label: '获奖情况',
          id: 'prize'
        },
        {
          label: '个人技能',
          id: 'skill'
        },
        {
          label: '自我评价',
          id: 'selfEvaluate'
        }
      ]
    }
  },
  created () {
    this.$store.commit('setChoose', 'resume')
    this.getBasicInfo()
    this.getEduInfo()
    this.getPracticeInfo()
    this.getProjectInfo()
    this.getPrizeInfo()
    this.getSkillInfo()
    this.getSelfEvaluateInfo()
    this.getSchoolInfo()
  },
  mounted () {
    window.addEventListener('scroll', this.onSroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.onSroll)
  },
  computed: {
    birthday () {
      const newTime = (new Date()).getTime() / 1000
      const oldTime = (new Date(this.basicInfoForm.date)).getTime() / 1000
      return Math.floor((newTime - oldTime) / (60 * 60 * 24 * 365))
    }
  },
  methods: {
    onSroll () {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById('leftSide').classList.add('resumeFixed')
      } else {
        document.getElementById('leftSide').classList.remove('resumeFixed')
      }
    },
    createPdf () {
      const {id: userId} = JSON.parse(window.localStorage.getItem('userInfo'))
      this.$http({method: 'get', url: `/upload/createPdf/${userId}`, responseType: 'blob'}).then(res => {
        const data = res.data
        const url = window.URL.createObjectURL(new Blob([data], { type: 'application/pdf' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '我的简历.pdf')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    toPreview () {
      const {id: userId} = JSON.parse(window.localStorage.getItem('userInfo'))
      this.$router.push(`/resume/preview/${userId}`)
    },
    openLikeDialog () {

    },
    openStatusDialog () {
      this.statusDialogVisible = true
    },
    fileSuccess () {
      this.imgkey = !this.imgkey
    },
    async submitSchoolInfo (item, index) {
      const res = await this.$http.post('/resume/schoolInfo', item)
      if (res.data.insertId) {
        item.id = res.data.insertId
        this.oldSchoolInfoList.push(JSON.parse(JSON.stringify(item)))
      } else {
        this.oldSchoolInfoList[index] = JSON.parse(JSON.stringify(item))
      }
      item.isEdit = false
      this.$forceUpdate()
    },
    cancelEditSchoolInfo (item, index) {
      if (item.id) {
        item.isEdit = false
        item.organization = this.oldSchoolInfoList[index].organization
        item.role = this.oldSchoolInfoList[index].role
        item.dateArray = this.oldSchoolInfoList[index].dateArray
        item.content = this.oldSchoolInfoList[index].content
        this.$forceUpdate()
      } else {
        this.schoolInfoList.splice(index, 1)
      }
    },
    async getSchoolInfo () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {data: res} = await this.$http.get(`/resume/schoolInfo/${userId}`)
      this.schoolInfoList = res
      this.schoolInfoList.forEach(item => {
        item.isEdit = false
        item.dateArray = []
        item.dateArray.push(item.fromDate)
        item.dateArray.push(item.toDate)
      })
      this.oldSchoolInfoList = JSON.parse(JSON.stringify(this.schoolInfoList))
      console.log(this.schoolInfoList, '这是校内')
    },
    async getSelfEvaluateInfo () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {data: res} = await this.$http.get(`/resume/selfEvaluateInfo/${userId}`)
      this.selfEvaluateInfoForm = res
      this.oldSelfEvaluateInfoForm = JSON.parse(JSON.stringify(res))
    },
    async getSkillInfo () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {data: res} = await this.$http.get(`/resume/skillInfo/${userId}`)
      this.skillInfoForm = res
      this.oldSkillInfoForm = JSON.parse(JSON.stringify(res))
    },
    selfEvaluateInfoCancel () {
      this.isEditSelfEvaluate = false
      this.selfEvaluateInfoForm = this.oldSelfEvaluateInfoForm
      this.$forceUpdate()
    },
    async submitSelfEvaluateInfo () {
      await this.$http.post('/resume/selfEvaluateInfo', this.selfEvaluateInfoForm)
      this.isEditSelfEvaluate = false
      this.getSelfEvaluateInfo()
    },
    async submitSkillInfo () {
      await this.$http.post('/resume/skillInfo', this.skillInfoForm)
      this.isEditSkill = false
      this.getSkillInfo()
    },
    skillInfoCancel () {
      this.isEditSkill = false
      this.skillInfoForm = this.oldSkillInfoForm
      this.$forceUpdate()
    },
    async getPrizeInfo () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {data: res} = await this.$http.get(`/resume/prizeInfo/${userId}`)
      this.prizeInfoList = res
      this.prizeInfoList.forEach(item => {
        item.isEdit = false
      })
      this.oldPrizeInfoList = JSON.parse(JSON.stringify(this.prizeInfoList))
    },
    async submitPrizeInfo (item, index) {
      const res = await this.$http.post('/resume/prizeInfo', item)
      if (res.data.insertId) {
        item.id = res.data.insertId
        this.oldPrizeInfoList.push(JSON.parse(JSON.stringify(item)))
      } else {
        this.oldPrizeInfoList[index] = JSON.parse(JSON.stringify(item))
      }
      item.isEdit = false
      this.$forceUpdate()
    },
    cancelEditPrizeInfo (item, index) {
      if (item.id) {
        item.isEdit = false
        item.prize = this.oldPrizeInfoList[index].prize
        item.getPrizeTime = this.oldPrizeInfoList[index].getPrizeTime
        this.$forceUpdate()
      } else {
        this.prizeInfoList.splice(index, 1)
      }
    },
    async getProjectInfo () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {data: res} = await this.$http.get(`/resume/projectInfo/${userId}`)
      console.log(res, '这是项目')
      this.projectInfoList = res
      this.projectInfoList.forEach(item => {
        item.isEdit = false
        item.dateArray = []
        item.dateArray.push(item.fromDate)
        item.dateArray.push(item.toDate)
      })
      this.oldProjectInfoList = JSON.parse(JSON.stringify(this.projectInfoList))
    },
    async submitProjectInfo (item, index) {
      const res = await this.$http.post('/resume/projectInfo', item)
      if (res.data.insertId) {
        item.id = res.data.insertId
        this.oldProjectInfoList.push(JSON.parse(JSON.stringify(item)))
      } else {
        this.oldProjectInfoList[index] = JSON.parse(JSON.stringify(item))
      }
      item.isEdit = false
      this.$forceUpdate()
    },
    cancelEditProjectInfo (item, index) {
      if (item.id) {
        item.isEdit = false
        item.project = this.oldProjectInfoList[index].project
        item.description = this.oldProjectInfoList[index].description
        item.role = this.oldProjectInfoList[index].role
        item.dateArray = this.oldProjectInfoList[index].dateArray
        this.$forceUpdate()
      } else {
        this.projectInfoList.splice(index, 1)
      }
    },
    async getPracticeInfo () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {data: res} = await this.$http.get(`/resume/practiceInfo/${userId}`)
      this.practiceInfoList = res
      this.practiceInfoList.forEach(item => {
        item.isEdit = false
        item.dateArray = []
        item.dateArray.push(item.fromDate)
        item.dateArray.push(item.toDate)
      })
      this.oldPracticeInfoList = JSON.parse(JSON.stringify(this.practiceInfoList))
    },
    async submitPracticeInfo (item, index) {
      const res = await this.$http.post('/resume/practiceInfo', item)
      console.log(res, '提交practice')
      if (res.data.insertId) {
        item.id = res.data.insertId
        this.oldPracticeInfoList.push(JSON.parse(JSON.stringify(item)))
      } else {
        this.oldPracticeInfoList[index] = JSON.parse(JSON.stringify(item))
      }
      item.isEdit = false
      this.$forceUpdate()
    },
    cancelEditPracticeInfo (item, index) {
      if (item.id) {
        item.isEdit = false
        item.company = this.oldPracticeInfoList[index].company
        item.department = this.oldPracticeInfoList[index].department
        item.site = this.oldPracticeInfoList[index].site
        item.dateArray = this.oldPracticeInfoList[index].dateArray
        this.$forceUpdate()
      } else {
        this.practiceInfoList.splice(index, 1)
      }
    },
    cancelEditEduInfo (item, index) {
      if (item.id) {
        item.isEdit = false
        item.college = this.oldEduInfoList[index].college
        item.discipline = this.oldEduInfoList[index].discipline
        item.education = this.oldEduInfoList[index].education
        item.gradeRank = this.oldEduInfoList[index].gradeRank
        item.dateArray = this.oldEduInfoList[index].dateArray
        this.$forceUpdate()
      } else {
        this.eduInfoList.splice(index, 1)
      }
    },
    schoolInfoClick (item) {
      this.$forceUpdate()
      item.isEdit = true
    },
    prizeInfoClick (item) {
      this.$forceUpdate()
      item.isEdit = true
    },
    projectInfoClick (item) {
      this.$forceUpdate()
      item.isEdit = true
    },
    practiceInfoClick (item) {
      this.$forceUpdate()
      item.isEdit = true
    },
    eduInfoClick (item) {
      this.$forceUpdate()
      item.isEdit = true
    },
    async submitEduInfo (item, index) {
      const res = await this.$http.post('/resume/eduInfo', item)
      if (res.data.insertId) {
        item.id = res.data.insertId
        this.oldEduInfoList.push(JSON.parse(JSON.stringify(item)))
        console.log(this.oldEduInfoList, 'old')
      } else {
        this.oldEduInfoList[index] = JSON.parse(JSON.stringify(item))
      }
      item.isEdit = false
      this.$forceUpdate()
    },
    async getEduInfo () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {data: res} = await this.$http.get(`/resume/eduInfo/${userId}`)
      this.eduInfoList = res
      console.log(res, 'woshijiaoyu')
      this.eduInfoList.forEach(item => {
        item.isEdit = false
        item.dateArray = []
        item.dateArray.push(item.fromDate)
        item.dateArray.push(item.toDate)
      })
      this.oldEduInfoList = JSON.parse(JSON.stringify(this.eduInfoList))
    },
    addSchoolCard () {
      if (!this.schoolInfoList) {
        this.schoolInfoList = []
      }
      this.schoolInfoList.push({isEdit: true})
    },
    addPrizeCard () {
      if (!this.prizeInfoList) {
        this.prizeInfoList = []
      }
      this.prizeInfoList.push({isEdit: true})
    },
    addEduCard () {
      if (!this.eduInfoList) {
        this.eduInfoList = []
      }
      this.eduInfoList.push({isEdit: true})
    },
    addProjectCard () {
      if (!this.projectInfoList) {
        this.projectInfoList = []
      }
      this.projectInfoList.push({isEdit: true})
    },
    addPracticeCard () {
      if (!this.practiceInfoList) {
        this.practiceInfoList = []
      }
      this.practiceInfoList.push({isEdit: true})
    },
    basicInfoCancel () {
      this.isEditBasicInfo = false
      this.basicInfoForm = this.oldBasicInfo
    },
    async submitBasicInfo () {
      await this.$http.post('/resume/basicInfo', this.basicInfoForm)
      this.isEditBasicInfo = false
      this.getBasicInfo()
    },
    async getBasicInfo () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {data: res} = await this.$http.get(`/resume/basicInfo/${userId}`)
      this.basicInfoForm = res
      this.oldBasicInfo = JSON.parse(JSON.stringify(res))
      console.log(res, 'ressss')
    },
    itemClick (index, id) {
      this.chooseIndex = index
      const idDom = document.getElementById(id)
      document.body.scrollTop = document.documentElement.scrollTop = idDom.offsetTop - 60
    },
    moment
  }
}
</script>

<style lang="less" scoped>
.avatarErea {
    position: relative;
    margin-right: 20px;
    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
    }
    .camera {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 64px;
      border-radius: 50%;
    }
  }
.el-form {
  display: flex;
  flex-wrap: wrap;
  .buttonGroup {
    margin-left: auto;
  }
  .el-form-item {
    width: 50%;
  }
}
.resumeFixed {
  box-sizing: border-box;
  position: fixed;
  top: 60px;
  width: 200px;
}
.passageContent {
  font-size: 14px;
  color: rgb(102, 102, 102);
  padding: 10px;
}
.contentDetail {
  color: #999;
  font-size: 14px;
  line-height: 16px;
  .prizeName {
    border-right: 1px solid #eee;
    padding-right: 20px;
  }
}
.title {
    font-size: 16px;
    line-height: 24px;
    color: rgb(87, 93,106);
    font-weight: 700;
    vertical-align: middle;
    display: block !important;
  }
.title::before {
  content: '';
  display: inline-block;
  background-color: #3f8aee;
  width:3px;
  height: 14px;
  margin-right: 8px;
}
.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dddfe3;
  margin-bottom: 5px;
  margin-top:15px;
  .add {
    color: #0c8cf6;
    cursor: pointer;
  }
}
.container{
  box-sizing: border-box;
  display: flex;
  padding: 10px 50px;
  .leftSide {
    width: 200px;
    .el-card {
      width: 200px;
      .leftItem {
        cursor: pointer;
        height: 14px;
        line-height: 14px;
        padding: 10px 20px;
        color: #666;
      }
    }
  }
  .middleContent {
    width: 60%;
    margin: 0 20px;
    .basicInfoBox {
      display: flex;
      cursor: pointer;
      padding: 10px;
      .basicInfo {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .infoItem {
          padding-right: 20px;
          border-right: 1px solid #eee;
          margin-right: 5px;
          i {
            margin-right: 3px;
          }
        }
      }
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .basicInfoBox:hover {
      box-shadow: #eeeef1 0px 0px 3px 3px;
    }
    .editBasicInfo {
      background-color: #fafafb;
      padding: 10px;
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    .eduInfoBox {
      .eduInfo {
        padding: 16px;
        .practiceContent {
          color: #666;
          font-size: 14px;
          margin-top: 12px;
        }
      }
      .eduInfo:hover {
        cursor: pointer;
        box-shadow: #eeeef1 0px 0px 3px 3px;
      }
      .editEduInfo {
        background-color: #fafafb;
        padding: 10px;
        margin-bottom: 10px;
        .el-form {
          display: flex;
          flex-wrap: wrap;
          .el-form-item {
            width: 50%;
          }
          .collegeTime {
            width: 100%;
          }
        }
      }
      .eduInfoHeader {
        display: flex;
        margin-bottom: 10px;
        .college {
          margin-right: 30px;
        }
        .time {
          color: #999;
        }
      }
      .eduInfoDetail {
        display: flex;
        span {
          margin-right: 10px;
        }
      }
    }
  }
  .rightSide {
    width: 25%;
    .header {
      padding-bottom: 5px;
      border-bottom: 1px solid #eee;
      color: #333;
      font-size: 16px;
      font-weight: 500;
      height: 16px;
      line-height: 16px;
    }
  }
}
.choosed {
  background-color: #eee;
}
</style>
